<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>肺炎疫情</title>
		<script type="text/javascript"  src="js/echarts.js"></script>
		<script type="text/javascript" src="js/china.js"></script>
		<script type="text/javascript" src="js/jquery.js"></script>
		<style>
			#china_div{
				height:600px;
				width: 800px;
				border: 1px black solid;
			}
			.box-title{
				color:red;
			}
			.box-subtitle{
				color:darkorange;
				font-style: italic;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<!-- 标签使用量统计 -->
			<div class="box-header">
				<h3 class="box-title">全国疫情数据实时统计地图</h3>
				<h4 class="box-subtitle">愿大家，共克时艰，众志成城，抗击肺炎</h4>
			</div>
			<div id="china_div">
				
			</div>
			<!-- 渲染容器一定要设置宽高 -->
		</div>
		
		<script>
	
		  	var dataresult=null;
		 		$.ajax({url:"FeiyanServlet",
		 			dataType:'json',
		 			success:function(result){
			      //  $("#div1").html(result);
			     
			        dataresult=result;
			        initChina();
			    }});
		 	
		
			function initChina(){
				   console.log(dataresult);
				   var mydata= dataresult;
				//各地数据
/* 				var mydata = [  
				             //{name: '北京',value: '253' }
				             dataresult,{name: '天津',value: '69' },  
				             {name: '上海',value: '243' },{name: '重庆',value: '376' },  
				             {name: '河北',value: '135' },{name: '河南',value: '764' },  
				             {name: '云南',value: '124' },{name: '辽宁',value: '89' },  
				             {name: '黑龙江',value: '190' },{name: '湖南',value: '661' },  
				             {name: '安徽',value: '530' },{name: '山东',value: '307' },  
				             {name: '新疆',value: '99' },{name: '江苏',value: '341' },  
				             {name: '浙江',value: '895' },{name: '江西',value: '548' },  
				             {name: '湖北',value: '16678' },{name: '广西',value: '150' },  
				             {name: '甘肃',value: '57' },{name: '山西',value: '81' },  
				             {name: '内蒙古',value: '42' },{name: '陕西',value: '165' },  
				             {name: '吉林',value: '54' },{name: '福建',value: '205' },  
				             {name: '贵州',value: '64' },{name: '广东',value: '895' },  
				             {name: '青海',value: '17' },{name: '西藏',value: '1' },  
				             {name: '四川',value: '301' },{name: '宁夏',value: '34' },  
				             {name: '海南',value: '99' },{name: '台湾',value: '99' },  
				             {name: '香港',value: '21' },{name: '澳门',value: '10' }  
				        ];  */
				        
				        
				//左侧图例数据比例尺
				var splitList = [{start: 1000, end: 999999},
								 {start: 500, end: 999},
			                 	 {start: 100, end: 499},
			                  	 {start: 10, end: 99},
			                     {start: 1, end: 9}];
			                     
				var optionMap = {  
			            backgroundColor: '#ffffff',  
			            
			            tooltip : { //提示数据信息
					        trigger: 'item'  
					    }, 
					    
			            //配置属性
			            series: {  
			            	name: '确诊病例',
			                type: 'map',  
			                mapType: 'china', // 地图类型，支持world，china及全国34个省市自治区
			                data:mydata,  //根据数据绘制颜色分级图
			                
			                //显示
			                label: {  
			                    normal: {  
			                        show: true  //省份名称  
			                    },
			                    emphasis: {  //对文字进行选中处理
		                        	show: true  ,
		                        	color: 'red',
		                    	}  
		                	},
			            } ,
			            
			             //左侧小导航图标 对应splitList中的数据
			            visualMap: {
			                left: 'left',
			                top: 'bottom',
			                splitList:splitList,
			                color: ['#9d2933', '#cb3a56', '#ff7500','#faff72','#c9dd22'],
			                show:true
			            },
			            
			    }; 
				//初始化echarts实例
			    var myChart = echarts.init(document.getElementById('china_div'));
				//使用制定的配置项和数据显示图表
			    myChart.setOption(optionMap);	
			}
	
			//initChina();
			
		</script>
	</body>
</html>
